<template>
  <div class="chat-page">
    <div class="chat-layout">
      <!-- 会话列表 -->
      <SessionList
        :current-session-id="currentSessionId"
        @session-change="handleSessionChange"
        @session-create="handleSessionCreate"
        @session-delete="handleSessionDelete"
      />

      <!-- 聊天容器 -->
      <div class="chat-main">
        <ChatContainer :session-id="currentSessionId" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ChatContainer from '../components/ChatContainer.vue'
import SessionList from '../components/SessionList.vue'
import { getCurrentSessionId, setCurrentSessionId } from '../utils/storage'

const currentSessionId = ref(getCurrentSessionId())

/**
 * 处理会话切换
 */
const handleSessionChange = (sessionId) => {
  currentSessionId.value = sessionId
  setCurrentSessionId(sessionId)
}

/**
 * 处理会话创建
 */
const handleSessionCreate = (sessionId) => {
  currentSessionId.value = sessionId
  setCurrentSessionId(sessionId)
}

/**
 * 处理会话删除
 */
const handleSessionDelete = (sessionId) => {
  // 如果删除的是当前会话，切换到新的当前会话
  if (sessionId === currentSessionId.value) {
    const newSessionId = getCurrentSessionId()
    currentSessionId.value = newSessionId
    setCurrentSessionId(newSessionId)
  }
}

onMounted(() => {
  // 确保有当前会话
  if (!currentSessionId.value) {
    currentSessionId.value = getCurrentSessionId()
  }
})
</script>

<style scoped>
.chat-page {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-layout {
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
</style>

